<!-- 1 定义组件模版 -->
<template>


    <!-- http://localhost/#/css -->

    <div class="com">
        介绍CSS的知识，样式，布局，内置函数，important

        <div class="comApp">
            <ul>
                <!-- <li v-for=" chapter in chapters">
                    <router-link
                        :to="`/css/detail?id=${chapter.id}&title=${chapter.title}&content=${chapter.content}`">{{
                            chapter.title
                        }}</router-link>
                </li> -->


                <!-- <li v-for=" chapter in chapters">
                    <router-link :to="{
                        path: '/css/detail',

                        query: {
                            id: chapter.id,
                            title: chapter.title,
                            content: chapter.content
                        }
                    }">{{
                        chapter.title
                        }}</router-link>
                </li> -->



                <!-- <li v-for=" chapter in chapters">
                    <router-link :to="{
                        path: '/css/detail',
                        query: {
                            ...chapter
                        }
                    }">{{
                        chapter.title
                        }}</router-link>
                </li> -->

                <li v-for=" chapter in chapters">
                    <router-link :to="{
                        name: 'CssDetail',
                        query: {
                            ...chapter
                        }
                    }">{{
                        chapter.title
                    }}</router-link>
                </li>
            </ul>


            <div>
                <router-view></router-view>

            </div>




        </div>

    </div>

</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="CssComponent">
import { reactive } from 'vue'

let chapters = reactive([
    { id: "asdfsadf001", title: '布局', content: '使用position属性进行布局' },
    { id: "asdfsadf002", title: '内置函数', content: '内置了calc，xxx等函数' },
    { id: "asdfsadf003", title: '属性（宽高）', content: '宽高的取值有  px cm vh vw等 ' },
])



</script>

<!-- 3 定义样式 -->
<style scoped>
.com {
    overflow-y: auto;
    min-height: 300px
}

.comApp>ul,
.comApp>div {
    margin: 10px;
    display: inline-block;
    vertical-align: top;
}
</style>